<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { postGetService,postAddCommentService,postCommentListService } from '@/api/forum.js';
import {userGetService} from '@/api/user';
import { useTokenStore } from '@/stores/token.js'
import { ElMessage } from 'element-plus';

const tokenStore = useTokenStore();
// 获取 URL 中的查询字符串
const queryString = window.location.search;
// 解析查询字符串
const params = new URLSearchParams(queryString);
// 获取参数值
const id = params.get('id');

const post = ref({
  
});
const user = ref({})
// 调用 postGetService 函数获取帖子内容
const postGet = async () => {
  try {
    const result = await postGetService(id)
    console.log('res',result)
    post.value = result.data
    userGet();
    
  } catch (error) {
    console.error('Error:', error);
  }
}
postGet();
//获取帖子作者信息
const userGet = async () => {
  try {
    const result = await userGetService(post.value.createUser)
    user.value = result.data
  } catch (error) {
    console.error('Error:', error);
  }
}






// 回复列表
const replies = ref([
  { id: 1, author: '用户1', content: '这是第一个回复内容。' },
  { id: 2, author: '用户2', content: '这是第二个回复内容。' },
]);
//输入框内容
const forumComment = ref({
  //输入框内容
  content: '',
  postId: id
  
});
//发表评论函数
const postAddComment = async () => {
  if(!tokenStore.token){
    ElMessage.warning('请先登录')
    return;
  }
  //判断回复内容是否为空
  if(forumComment.value.content.trim() === ''){
    ElMessage.warning('回复内容不能为空')
    return;
  }
  try {
    const result = await postAddCommentService(forumComment.value)
    ElMessage.success(result.message);
    //刷新调用回复内容
  
  } catch (error) {
    console.error('Error:', error);
  }
  
};

//获取文章评论列表
const postCommentList = async () => {
  try {
    //获取后端评论列表
     const result = await postCommentListService(id);
     const comments = result.data;
     for(const comment of comments){
      //调用用户信息接口
      const userResult = await userGetService(comment.createUser);
      comment.nickname = userResult.data.nickname; // 假设用户信息中有nickname
      comment.userPic = userResult.data.userPic;
      
      }
     replies.value = comments; 
     
  } catch (error) {
    console.error('Error:', error);
  }
};
postCommentList();

</script>

<template>
  <el-container>
    <el-header  class="header">
      
      <h2>作者：<span class="nickname nickname1">{{ user.nickname }}</span></h2>
      <el-avatar :src="user.userPic"  shape="square"  class="avatar"/>
    </el-header>
    
    <!-- 帖子内容 -->
    <el-card class="post-card custom-menu" shadow="always">
      <h1>{{post.title}}</h1>
      <p>{{ post.summary }}</p>
    </el-card>

    <el-divider ></el-divider>
    
    <!-- 回复列表 -->
    <el-scrollbar class="reply-list " >
      <el-card v-for="reply in replies" :key="reply.id" class="reply-card custom-menu" shadow="hover">
        <div class="reply-header">
          <el-avatar :src="reply.userPic" icon="el-icon-user" shape="square" class="reply-avatar"></el-avatar>
          <span class="reply-author">{{ reply.nickname }}</span>
        </div>
        <p class="reply-content">{{ reply.content }}</p>
      </el-card>
    </el-scrollbar>

    <!-- 回复框 -->
    <div class="reply-form ">
      <el-input type="textarea" v-model="forumComment.content"  placeholder="输入回复..."  rows="3"  class="reply-input" ></el-input>
      <el-button type="primary" @click="postAddComment" class="submit-button">提交回复</el-button>
    </div>
  </el-container>
</template>

<style scoped>
.header {
  display: flex;
  align-items: center; /* 垂直居中 */
}
.avatar {
  width: 50px; /* 设定头像宽度 */
  height: 50px; /* 设定头像高度 */
  border-radius: 50%; /* 圆形头像 */
}
.nickname1 {
  margin-right: 10px; /* 设置标题和头像之间的间距 */
  font-size: 24px; /* 调整标题大小 */
}
.nickname{
  color: #47ff56;
}
.custom-menu {
  background-color: rgba(255, 254, 254, 0.322); /* 可选：为菜单项设置半透明背景 */
}
.post-card {
  margin: 20px 0;
  padding: 20px;
}

.reply-list {
  max-height: 300px;
  overflow-y: auto;
}

.reply-card {
  margin-top: 15px;
  padding: 15px;
}

.reply-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reply-avatar {
  margin-right: 10px;
}

.reply-author {
  font-weight: bold;
}

.reply-content {
  color: #666;
}

.reply-form {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.reply-input {
  flex: 1;
  margin-right: 10px;
}

.submit-button {
  width: 120px;
}
</style>
